import React, { Component } from 'react';
import { Table, Icon } from 'antd';
import axios from 'axios';
import articleService from '../service/article.service';
import { PagerInterface } from '../service/base.service';
import { ArticleModel } from '../model/article.model';
import menuMgr from '../menu';
import { FormHelper } from '../form-helper';
import Article from './article';

export interface IState { 
    pager?: PagerInterface<ArticleModel> | undefined;
    pagination: {
        defaultPageSize: number;
        defaultCurrent: number;
        total: number;
        current: number;
        page: number;
        pageSize: number;
    }
}
export default class ArticleList extends Component { 

    constructor(props: any) {
        super(props);
        this.onPageChange.bind(this);
    }
    async componentDidMount() { 
        await this.renderPager(0, 10, {});
    }
    async renderPager(page: number, pagesize: number, options: any) { 
        let pager = await articleService.find(page, pagesize, {});
        this.setState({
            pager: pager,
            pagination: {
                defaultPageSize: pager.pagesize,
                defaultCurrent: pager.page + 1,
                total: pager.count,
                current: pager.page + 1,
                pageSize: pager.pagesize
            }
        })
    }

    async onPageChange(options: any) {
        let { current, pageSize } = options;
        await this.renderPager(current - 1, pageSize, {});
    }
    onEdit(id: number) { 
        return async (event: any) => { 
            event.preventDefault();
            let article = await articleService.get(id);
            menuMgr.gotoComponent(<Article name='edit-article' model={article}></Article>);
        }
    }
    onDelete(id: number) { 
        return (event: any) => { 
        }
    }

    state: IState = {
        pager: undefined,
        pagination: {
            defaultPageSize: 1,
            defaultCurrent:  1,
            total: 0,
            current: 1,
            page: 1,
            pageSize: 1
        }
    }

    public columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            key: 'id',
            // sorter: true,
        },
        {
            title: '标题',
            dataIndex: 'title',
            key: 'title',
        },
        {
            title: '发布时间',
            dataIndex: 'created_at',
            key: 'created_at',
        },
        {
            title: '操作',
            key: 'operate',
            render: (text: string, record: any) => { 
                return (
                    <span>
                        <Icon type="edit" title="编辑" data-id={record.id} onClick={this.onEdit(record.id)} /> 
                        &nbsp;&nbsp;
                        <Icon type="delete" title="删除" /> 
                        &nbsp;&nbsp;
                        <Icon type="to-top" title="置顶" />
                    </span>
                )
            }
        }
    ];
    

    render() { 
        return (
            <Table rowKey="id" onChange={this.onPageChange.bind(this)} dataSource={this.state.pager && this.state.pager.items || []} columns={this.columns} pagination={this.state.pagination}></Table>
        )
    }
}